<template>
    <div class="container">
        <div>
            <a-split :style="{
                height: '85vh',
                width: '100%',
                minWidth: '500px',
                border: '1px solid var(--color-border)'
            }" v-model:size="size" min="80px">
                <template #first>
                    <!-- 左边视图 -->
                    <a-typography-paragraph>
                        <!-- tab 标签页 -->
                        <a-tabs default-active-key="1" @change="tabChange">
                            <a-tab-pane key="1" title="题目描述">
                                <div class="question-details">
                                    <div class="question-details-title-class">
                                        <h2>赛前准备</h2>
                                        <span>内存限制: {{ data.memoryLimit }}</span>
                                        <span>时间限制: {{ data.timeLimit }}</span>
                                        <span>提交: 96</span>
                                        <span>解决: 0</span>
                                    </div>
                                    <a-divider />
                                    <div class="quesiton-details-descreption">
                                        <h3>题目描述</h3>
                                        <a-textarea style="
                                        background: black !important" :model-value="data.description" auto-size
                                            :disabled="true" />
                                    </div>
                                    <div class="quesiton-details-input">
                                        <h3>输入</h3>
                                        <a-textarea :model-value="data.input" auto-size :disabled="true" />
                                    </div>
                                    <div class="quesiton-details-output">
                                        <h3>输出</h3>
                                        <a-textarea :model-value="data.output" auto-size :disabled="true" />
                                    </div>
                                    <div v-for="example in data.exampleDTOList" :key="example.input">
                                        <div class="quesiton-details-example-output">
                                            <h3>样例输入</h3>
                                            <a-textarea :model-value="example.input" auto-size :disabled="true" />
                                        </div>
                                        <div class="quesiton-details-example-output">
                                            <h3>样例输出</h3>
                                            <a-textarea :model-value="example.output" auto-size :disabled="true" />
                                        </div>
                                    </div>

                                    <div class="quesiton-details-tip">
                                        <h3>提示</h3>
                                        <a-textarea :model-value="data.tip" auto-size :disabled="true" />
                                    </div>
                                    <div class="quesiton-details-tag">
                                        <h3>标签</h3>
                                        <a-space>
                                            <a-tag color="green" v-for="tag in data.tagList" :key="tag">{{ tag
                                                }}</a-tag>
                                        </a-space>
                                    </div>
                                </div>

                            </a-tab-pane>

                            <a-tab-pane key="2" title="题解">
                                题解
                            </a-tab-pane>
                            <a-tab-pane key="3" title="提交记录">
                                <div>
                                    <a-table :columns="columns" :data="questionSubmitLogData" :pagination="false" />
                                </div>
                            </a-tab-pane>
                            <a-tab-pane key="4" title="统计&排行">
                                统计&排行
                            </a-tab-pane>
                        </a-tabs>
                    </a-typography-paragraph>
                </template>

                <!-- 右边 -->
                <template #second>
                    <a-typography-paragraph>
                        <div class="code-area-header">
                            <a-space>
                                <a-select style="width: 150px;" v-model="language" @change="doSelectChange"
                                    size="small">
                                    <a-option>java</a-option>
                                    <a-option>cpp</a-option>
                                    <a-option>python</a-option>
                                    <a-option>go</a-option>
                                    <a-option>php</a-option>
                                </a-select>
                                <a-button @click="onSubmit" type="primary">提交</a-button>
                            </a-space>
                        </div>
                        <a-divider />

                        <div class="code-area-body">
                            <codeEditorIndex :code="code" :language="language" :handle-change="onChange">
                            </codeEditorIndex>
                        </div>
                    </a-typography-paragraph>
                </template>
            </a-split>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import { questionQueryDetails } from '@/api/question'
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import codeEditorIndex from '@/components/codeEditor/index.vue';
import judgeQuestion from '@/api/judgeApi';
import { queryListByQuestionId } from '@/api/questionSubmitLogApi';

const size = ref(0.5)
const route = useRoute();
const router = useRouter();

const language = ref('java');
const code = ref('');
const questionIdRef = ref();

const columns = [
    {
        title: '状态',
        dataIndex: 'submitStatus',
    },
    {
        title: '执行时间',
        dataIndex: 'executeTime',
    },
    {
        title: '内存消耗',
        dataIndex: 'memoryConsume',
    },
    {
        title: '语言',
        dataIndex: 'submitLanguage',
    },
    {
        title: '提交时间',
        dataIndex: 'createTime',
    },
];

// 问题提交记录列表
const questionSubmitLogData = ref([])

// 问题详情数据结构
const data = ref({
    id: 0,
    description: '',
    difficultLevel: '',
    exampleDTOList: [
        {
            input: '',
            output: '',
        }
    ],
    input: '',
    memoryLimit: 0,
    output: '',
    tagList: [],
    timeLimit: 0,
    tip: '',
    title: '',
})

// 提交判题对象
const judgeSubmitData = ref({
    questionId: '',
    language: '',
    code: '',
})

onMounted(async () => {
    const questionId = route.query.id;
    // 如果问题 Id 不存在，则跳转到列表页面
    if (!questionId) {
        router.push({
            path: '/answer/list'
        })
        return;
    }
    questionIdRef.value = questionId as string;
    judgeSubmitData.value.questionId = questionId as string;
    // 查询问题详情
    const res = await questionQueryDetails(questionId as any);
    data.value = res.data
});

// 语言下拉选择改变函数
const doSelectChange = () => {
    console.log('下拉函数', language.value);
}


// 做题提交函数
const onSubmit = async () => {
    judgeSubmitData.value.language = language.value;
    judgeSubmitData.value.code = code.value;
    console.log("judgeSubmitData", judgeSubmitData.value);
    const res = await judgeQuestion(judgeSubmitData.value);
}

// 将函数的参数 v的值传递给响应式变量 code
const onChange = (v: string) => {
    code.value = v;
}

/**
 * tabs 标签切换事件函数
 * @param key 标签纸
 */
const tabChange = async (key: string | number) => {
    console.log('key', key);
    // 查询提交记录列表
    if (key === '3') {
        const res = await queryListByQuestionId(questionIdRef.value);
        questionSubmitLogData.value = res.data;
    }
}

</script>

<style lang="less" scoped>
.container {
    background-color: var(--color-fill-2);
    padding: 16px 20px;
    padding-bottom: 0;
}

.question-details-title-class {
    text-align: center
}

.question-details-title-class>span {
    margin-left: 20px
}

/**
    ::v-deep 是一个自定义的CSS选择器，用于绕过组件作用域的样式封装（也称为 Shadow DOM 封装）。
    这允许你更深层次地穿透组件的样式作用域，从而影响到子组件的样式
 */
::v-deep textarea:disabled {
    background: black;
}
</style>